<template>
  <div id="app">
    <keep-alive>
      <v-app>
        <router-view></router-view>
        <v-fab-transition>
          <v-btn
            v-show="showToTopBtn"
            class="to-top"
            fab
            fixed
            color="primary"
            @click="gotoTop">
            <v-icon
              class="ma-3"
              size="16">
              fas fa-chevron-up
            </v-icon>
          </v-btn>
        </v-fab-transition>
      </v-app>
    </keep-alive>
  </div>
</template>

<script>
    export default {
        name: "App",
        provide() {
            return {
                reload: this.reload,
            };
        },
        data() {
            return {
                isRouterAlive: true,
                showToTopBtn: false, //是否显示回到顶部按钮
            };
        },
        methods: {
            reload() {
                this.isRouterAlive = false;
                this.$nextTick(function () {
                    this.isRouterAlive = true;
                });
            },
            gotoTop() {
                this.$vuetify.goTo(0);
            }
        },
        mounted() {
            window.onresize = () => {
                this.$store.commit('screenWidth', document.documentElement.clientWidth);
                this.$store.commit('screenHeight', document.documentElement.clientHeight);
            };
            window.onscroll = () => {
                this.$store.commit('scrollTop', document.documentElement.scrollTop);
                this.showToTopBtn = this.$store.state.scrollTop > 300;
            }
        }
    };
</script>

<style lang="scss">
  ::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 0;
  }

  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 5px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    cursor: pointer;
    border-radius: 5px;
    background: #ccc;
    transition: color .2s ease;
  }

  ::v-deep .v-app {
    min-width: 450px;
  }
</style>

<style lang="scss" scoped>
  ::v-deep .to-top {
    bottom: 20px;
    right: 20px;
  }
</style>